// VARIABLE MANAGER HTML
// -------------------------------------------------------------------------

#variables.full-overlay(style="display:none")
    div.full-overlay-contents
        img.close(src="images/ico-x.png")
        h2 Variables

        // Tabs shown on top of the overlay.
        #variables-tabheaders.tab-headers
            label(data-tab="#variables-tab-props", title="View and edit the selected variable's properties.").active Properties

        // Variable list on the left.
        .left-col
            // This "Variable list" is populated via javascript.
            #variables-list.models-list

            if roles.admin || roles.variables
                .create
                    input#variables-txt-create(type="text", placeholder="New variable ID...", title="Enter the name of the new variable to be created.", data-validation="type:nospecial")
                    button#variables-but-create(title="Click to create a new variable with the specified ID.") Create

                .notes.small.
                    Please note that only normal characters and numbers are allowed
                    on the ID field. Special characters and spaces will be normalized.

        // The right panel has the tabs and forms for editing the variable.
        .right-col

            // Variable properties tab.
            #variables-tab-props.tab
                h4 Variable properties
                .panel
                    div
                        label(for="variables-txt-description") Description:
                        input#variables-txt-description.required.long(type="text", data-propertyname="description", title="Enter a quick description of this variable.")
                    div
                        label.code(for="variables-txt-code") Code:
                        textarea#variables-txt-code.required.long(data-propertyname="code", placeholder="Enter the variable's javascript code here, with at least 1 return statement...", title="Enter the javascript code returned by this variable.")
                    div
                        button#variables-but-save.save(title="Click to validate and save the script above.") Validate and save
                        span#variables-code-error.error


        // Manage tab.
       div.tab.reports(style="display:none")
           div.
               Reports will be available soon!